
{extend name='public/window' /}

{block name="content"}
<style>
    .layui-upload-drag {
        position: relative;
        padding: 10px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
        
    }
	
	.layui-input-block{
		    margin-left: 141px;
		    min-height: 36px;
	}
	.layui-textarea {
		    display: block;
		    width: 85%;
		    padding-left: 10px;
	}
	.layui-input{
		display: block;
		width: 85%;
		padding-left: 10px;
	}
	.layui-form-label{
		width: 110px;
	}
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form">
                {if isset($info.id)}
                <input type="hidden" name="id" value="{$info.id}">
                {/if}
                <input type="hidden" name="__token__" id="token" value="{:token()}"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">商户类型</label>
                    <div class="layui-input-inline">
                        <select name="merchant_type"  id="type_select"   lay-filter="merchant_type">
                            <option value="1">常驻</option>
                            <option value="2">临户</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">证件类型</label>
                    <div class="layui-input-inline">
                        <select name="cost_type_id" lay-filter="certificate_type" lay-search=""  lay-verify="required">
                            <option value="" >请选择</option>
                            <option value="1" >员工证</option>
                            <option value="2" >施工证</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item shinfo" style="display: none">
                    <label class="layui-form-label">商户姓名 *</label>
                    <div class="layui-input-block">
                        <input type="text" name="merch_username"   lay-filter="username" autocomplete="off" placeholder="请输入商户姓名" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item shinfo" style="display: none">
                    <label class="layui-form-label">商户手机号码 *</label>
                    <div class="layui-input-block">
                        <input type="text" name="merch_mobile"  lay-filter="mobile" autocomplete="off" placeholder="请输入商户手机号码" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item merch">
                    <label class="layui-form-label">商户*</label>
                    <div class="layui-input-inline">
                        <select name="merchant_id" lay-search=""  id="merchant_id"   lay-filter="merchant_id" >
                            <option value="" >请选择</option>
                            {volist name="merchant_list" id="t"}
                            <option value="{$t.id}" >{$t.name} - {$t.code}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收费方式</label>
                    <div class="layui-input-inline">
                        <select name="pay_type" lay-search=""  lay-verify="required">
                            <option value="" >请选择</option>
                            {volist name="pay_type" id="t"}
                            <option value="{$t.id}" >{$t.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费类型</label>
                    <div class="layui-input-inline">
                        <select name="cost_type_list" id="cost_type_list" lay-search=""  lay-verify="required" lay-filter="cost_type_list"  lay-verify="required">
                            <option value="" >请选择</option>
                            {volist name="cost_type_list" id="t"}
                            <option value="{$t.id}" >{$t.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费列表：</label>
                    <div class="layui-input-block">
                        <table class="layui-hide" id="student_table" lay-filter="student_table"></table>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">办理张数 </label>
                    <div class="layui-input-block">
                        <input type="text" name="number" id="number" value="1" lay-filter="number" autocomplete="off" placeholder="请输入需缴金额" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手续费比例：</label>
                    <div class="layui-input-block">
                        <input type="number" name="service_charge_rate" id="service_charge_rate" value="{$service_charge}" lay-filter="service_charge_rate"  lay-verify="required" autocomplete="off" class="layui-input" >
                        <span>%</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手续费：</label>
                    <div class="layui-input-block">
                        <input type="number" name="service_charge" id="service_charge" disabled   lay-verify="required" autocomplete="off" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">总费用 *</label>
                    <div class="layui-input-block">
                        <input type="text" name="real_amount" disabled="disabled"  id="amount" lay-verify="required" autocomplete="off" placeholder="请输入需缴金额" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名 *</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入需姓名" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号 *</label>
                    <div class="layui-input-block">
                        <input type="text" name="mobile" lay-verify="required" autocomplete="off" placeholder="请输入需手机号" class="layui-input" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">有效期</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="date_type" checked="checked"  lay-skin="switch" lay-filter="switchTest" lay-text="长期有效|固定时间">
                    </div>
                </div>
                <div class="layui-form-item" style="display: none" id="interval">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期时间范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="date" id="test10" placeholder=" 选择时间 ">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">身份证正面：</label>
                    <div class="layui-input-block">
                        <div class="layui-upload-drag">
                            <img id="is_id_card"  style="width: 260px;margin: 10px 0 10px 0px;height: 150px" src="{if isset($info.id)} {$info.description} {else} __IMG__/default_upload.png {/if}" alt="上传附件" width="120" height="120">
                            <input type="hidden" id="is_id_card_input" name="id_card_positive" value=""   lay-verify="required" lay-verType="tips" lay-reqText="请上传身份证正面~~">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">身份证背面：</label>
                    <div class="layui-input-block">
                        <div class="layui-upload-drag">
                            <img id="the_id_card" style="width: 260px;margin: 10px 0 10px 0px;height: 150px"  src="{if isset($info.id)} {$info.description} {else} __IMG__/default_upload.png {/if}" alt="上传附件" width="120" height="120">
                            <input type="hidden" id="the_id_card_input" name="id_card_negative" value=""   lay-verify="required" lay-verType="tips" lay-reqText="请上传身份证背面~~">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" id="id_card"style=" position: absolute;width: 50%;left: 500px;bottom: 273px;" >
                    <label class="layui-form-label label-required-next">其他证件上传：</label>
                    <div class="layui-input-block">
                        <div class="layui-upload-drag">
                            <img id="skill" style="width: 260px;margin: 10px 0 10px 0px;height: 150px" src="{if isset($info.id)} {$info.description} {else} __IMG__/default_upload.png {/if}" alt="上传附件" width="120" height="120">
                            <input type="hidden" id="skill_input" name="other_certificate" value="" >
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin " style="width: 100%">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0px;text-align: center;">
                            <button class="layui-btn" lay-submit="" lay-filter="add">{:__('Submit')}</button>
                            <button type="reset" class="layui-btn layui-btn-primary">{:__('Reset')}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/html" id="operationTpl">
    <a href="javascript:;" class="layui-btn  layui-btn-danger layui-btn-xs" data-title="删除" lay-event="del"><i class="layui-icon "></i></a>
</script>
<script>
    layui.use(['element', 'form', 'table', 'jquery','lucky','upload','laydate','xmSelect'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var $ = layui.jquery;
        var lucky=layui.lucky;
        laydate.render({
            elem: '#test10'
            ,type: 'datetime'
            ,range: true,
			trigger: 'click'
        });
        form.on('select(merchant_type)', function(data){
            var  type = data.value;
            if(type==1){
                $(".shinfo").css('display','none');
                $(".merch").css('display','block');
            }else{
                $(".shinfo").css('display','block');
                $(".merch").css('display','none');
            }
        });
        var costType = [];
        var student_table = table.render({
            id:'student_table',
            elem:'#student_table',
            cols: [[
                {field: 'name', title: '收费名称'},
                {field: 'type', title: '收费类型', templet: function (item) {
                        var type = item.type
                        if (type == 1) {
                            return '押金'
                        } else if (type == 2) {
                            return '费用'
                        } else if (type == 3) {
                            return '证件'
                        } else {
                            return '未知类型'
                        }
                    }},
                {title: '金额', field: 'amount',edit:true},
                {templet: '#operationTpl', align: 'center', title: '操作操作操作'}
            ]],
            data: costType
        });
        table.on('tool(student_table)', function (obj) {
            var data = obj.data;
            var _id=parseInt(data.id);
            var layEvent = obj.event;
            if(layEvent==="detail"){
                lucky.CreateOpenForm("缴费详情","{:url('detail')}");
                return false;
            }else if(layEvent==="del"){
                console.log('打印',obj.data)
                obj.del();
                var real_amount = 0;
                var param  = layui.table.cache["student_table"]
                for (let i = 0; i < param.length; i++) {
                    if (param[i] == null || param[i] == "" || JSON.stringify(param[i]) == "{}") {
                        param.splice(i, 1);
                        console.log(param);
                        i = i - 1;
                    }
                }
                console.log('打印',param)
                var param  = layui.table.cache["student_table"]
                for ( var i=0;i<param.length;i++){
                    real_amount += parseFloat(param[i].amount);
                }
                student_table.reload(param);
                $("#amount").val(parseFloat(real_amount));
                return false;
                // lucky.FormatData(_id,"{:url('del')}");
            }
        });
        table.on('edit(student_table)', function(obj){
            var real_amount = 0;
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            console.log('value',value)
            var param  = layui.table.cache["student_table"]
            for ( var i=0;i<param.length;i++){
                real_amount += parseFloat(param[i].amount);
            }
            student_table.reload(param);
            $("#amount").val(parseFloat(real_amount));
        });
        form.on('switch(switchTest)', function(data){
            if (this.checked == false){
                $('#interval').css('display','block')
            }else{
                $('#interval').css('display','none')
            }
        });
        form.on('select(cost_type_list)', function(data){
            student_table.reload({data:[]});
            console.log('data',data.value)
            if (!data.value) {
                return false
            }
            $.ajax({
                url:"{:url('Common/getCostType')}",
                type:"post",
                data: {'cost_type':data.value},
                dataType:"json",
                success:function(data){
                    var param = data.data
                    for (var i =0;i< param.length;i++){
                        param[i].amount = 0
                    }
                    student_table.reload(data);
                }
            });
            return false;
        });
        form.on('select(certificate_type)', function(data){
            console.log(data.value)
            if (data.value == 2 ){
                $('#number').css('display','block')
                $('#id_card').css('display','block')
            }else if (data.value == 1) {
                $('#number').css('display','none')
                $('#id_card').css('display','none')

            }
        });
        $("#number").on("input",function(e){
            console.log('监听中……',e.originalEvent.data)
            var number = e.originalEvent.data;
            var real_amount = $("#amount").val();
            $("#amount").val(parseFloat(number * real_amount));
        });
        form.on('select(cost_rule)', function(data){
            var amount = $("#cost_rule").find("option:selected").attr("data-info");
            $('#amount').val(amount)
        });
        upload.render({
            elem:'#is_id_card'
            ,url: "{:url('common/UpImg')}" //图片上传地址
            ,accept: 'images' //
            ,acceptMime: 'image/*'
            ,size: 1024*12
            ,before:function (res) {
                loading = layer.load(2, {
                    shade: [0.2, '#000'] //0.2透明度的白色背景
                });
            }
            ,done: function(data){
                layer.close(loading);
                if (data.code==1){
                    layer.msg(data.msg, {icon: 1, time: 1000},function () {
                        $("#is_id_card").attr("src",data.data.thumb_path);
                        $("#is_id_card_input").val(data.data.thumb_path);
                    });
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            }
            ,error:function (red) {
                layer.close(loading);
                layer.msg("网络错误", {icon: 5, time: 1500});
            }
        });
        upload.render({
            elem:'#the_id_card'
            ,url: "{:url('common/UpImg')}" //图片上传地址
            ,accept: 'images' //
            ,acceptMime: 'image/*'
            ,size: 1024*12
            ,before:function (res) {
                loading = layer.load(2, {
                    shade: [0.2, '#000'] //0.2透明度的白色背景
                });
            }
            ,done: function(data){
                layer.close(loading);
                if (data.code==1){
                    layer.msg(data.msg, {icon: 1, time: 1000},function () {
                        $("#the_id_card").attr("src",data.data.thumb_path);
                        $("#the_id_card_input").val(data.data.thumb_path);
                    });
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            }
            ,error:function (red) {
                layer.close(loading);
                layer.msg("网络错误", {icon: 5, time: 1500});
            }
        });
        upload.render({
            elem:'#skill'
            ,url: "{:url('common/UpImg')}" //图片上传地址
            ,accept: 'images' //
            ,acceptMime: 'image/*'
            ,size: 1024*12
            ,before:function (res) {
                loading = layer.load(2, {
                    shade: [0.2, '#000'] //0.2透明度的白色背景
                });
            }
            ,done: function(data){
                layer.close(loading);
                if (data.code==1){
                    layer.msg(data.msg, {icon: 1, time: 1000},function () {
                        $("#skill").attr("src",data.data.thumb_path);
                        $("#skill_input").val(data.data.thumb_path);
                    });
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            }
            ,error:function (red) {
                layer.close(loading);
                layer.msg("网络错误", {icon: 5, time: 1500});
            }
        });
        //表单赋值
        var info = {:json_encode($info)};
        form.val("form",info);
        form.on('submit(add)', function (data) {
            var datas  = layui.table.cache["student_table"]
            data.field.type = 3 // 添加type
            data.field.is_admin_create = 1 // 添加type
            data.field.pay_status = 1 // 支付状态
            data.field.datas = datas // 添加type
            lucky.FormSubmit("{:url('adminAdd')}",data.field,true);
            return false;
        });
    })
</script>

{/block}

